<template>
    <div>
        <div>
            <div>
                <div class="header_box">
                    <div>
                        <div @click="quxiao">取消</div>
                    </div>
                    <div name="center">添加规格</div>
                    <div name="right" @click="bianji">确定</div>
                </div>
            </div>
        </div>
        <!-- <header></header> -->
        <div>
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field
                        class="py-2"
                        v-model="dataList[0]"
                        name="cnSpecification"
                        label="中文规格"
                        placeholder="如大份"
                        :rules="[{ required: true, message: '如大份' }]"
                    />
                    <van-field
                        class="py-2"
                        v-model="dataList[1]"
                        name="uk_specification"
                        label="英文规格"
                        placeholder="英文规格"
                        :rules="[{ required: true, message: '如Such as Large' }]"
                    />
                    <van-field
                        class="py-2"
                        v-model="dataList[2]"
                        name="shop_id"
                        label="价格"
                        placeholder="价格"
                        :rules="[{ required: true, message: '请输入价格' }]"
                    />
                    <van-field
                        class="py-2"
                        v-model="dataList[3]"
                        name="goods_price"
                        label="库存数量"
                        placeholder="库存数量"
                        :rules="[{ required: true, message: '请输入库存数量' }]"
                    />
                    <div>
                        <van-field
                            v-model="type"
                            readonly
                            clickable
                            label="类型"
                            required
                            :rules="[{ required: true, message: '不能为空' }]"
                            name="type"
                            :value="houseutilizationValue"
                            placeholder="请选择"
                            @click="houseutilizationType"
                        />
                        <div v-if="showType" class="popup-bg">
                            <div class="popup">
                                <div class="btn">
                                    <div @click="cancel" class="cancle">取消</div>
                                    <div @click="confirm" class="confirm">确定</div>
                                </div>
                                <van-checkbox-group v-model="result">
                                    <van-tree-select
                                        :items="houseutilizationColumns"
                                        :active-id.sync="activeIds"
                                        :main-active-index.sync="activeIndex"
                                    />
                                </van-checkbox-group>
                            </div>
                        </div>
                    </div>
                </van-cell-group>
                <div style="margin: 16px" class="py-1">
                    <van-button round block type="primary" native-type="submit"> 提交 </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant'
import { mapMutations, mapState } from 'vuex'

export default {
    data() {
        return {
            dataList: [],
            newList: [],
            pakerValue: null,
            showType: false,
            houseutilizationColumns: [
                {
                    id: 0,
                    text: '首饰',
                    children: [
                        {
                            id: 0,
                            text: '项链'
                        },
                        {
                            id: 1,
                            text: '戒指'
                        }
                    ]
                },
                {
                    id: 1,
                    text: '手办',
                    children: [
                        {
                            id: 0,
                            text: '国漫手办'
                        }
                    ]
                },
                {
                    id: 2,
                    text: '手机卡',
                    children: [
                        {
                            id: 0,
                            text: '电信'
                        }
                    ]
                },
                {
                    id: 4,
                    text: '电子产品',
                    children: [
                        {
                            id: 0,
                            text: '电子手表'
                        }
                    ]
                },
                {
                    id: 5,
                    text: '装饰品',
                    children: [
                        {
                            id: 0,
                            text: '摆件'
                        }
                    ]
                },
                {
                    id: 5,
                    text: '碗具',
                    children: [
                        {
                            id: 0,
                            text: '铲子'
                        },
                        {
                            id: 1,
                            text: '瓷碗'
                        }
                    ]
                },
                {
                    id: 5,
                    text: '艺术品',
                    children: [
                        {
                            id: 0,
                            text: '雕像'
                        }
                    ]
                },
                {
                    id: 5,
                    text: '体育用品',
                    children: [
                        {
                            id: 0,
                            text: '篮球'
                        }
                    ]
                }
            ],
            activeIndexList: [],
            indexList: [],
            activeIndexListCode: [],
            houseutiliztionCode: [],
            houseutilizationCodeList: [],
            houseutilizationValue: '',
            newhouseutilizationCode: null,
            houseutilizationCode: '', // 房屋利用情况
            oldhouseutilizationCode: null,
            result: [],
            activeIds: [],
            activeIndex: 0,
            type: ''
        }
    },
    methods: {
        ...mapMutations(['CommAdd/add']),
        ...mapState(['CommAdd/GueGAdd']),

        quxiao() {
            this.$router.push('/CommodityMan/CommodityAdd')
        },
        bianji() {
            if (this.dataList.length == 4) {
                Toast.success('请点击下面的提交按钮')
            } else {
                Toast.fail('请检查一下是否填写完成')
            }
        },
        onSubmit(values) {
            console.log('submit', typeof values)
            this.newList = values
            console.log(this.dataList)
            console.log(this.newList)

            if (this.dataList.length == 4) {
                this['CommAdd/add'](this.newList)
                Toast.success('添加完成')
                this.$router.push('/CommodityMan/CommodityAdd')
            } else {
                Toast.fail('添加失败')
            }
        },
        onConfirm(value) {
            this.value = value
            this.showPicker = false
        },
        //房屋利用情况输入框点击时间
        houseutilizationType() {
            this.showType = true
            this.activeIndexList = []
            this.houseutilizationCode = []
        },
        // 房屋利用情况弹窗确定按钮
        confirm() {
            this.houseutilizationCodeList = []
            this.activeIndexListCode = []
            this.result = []
            this.showType = false
            this.houseutilizationValue = this.activeIndexList.toString()
            ;(this.newhouseutilizationCode = this.houseutilizationCode), console.log(this.result)
            console.log(this.activeIndex)
            let data = this.getDataFun(this.houseutilizationColumns, this.activeIndex, this.activeIds)
            console.log(data.arr)
            let dataList = []
            data.arr.forEach((item) => {
                console.log(item)
                dataList.push(item.text)
            })
            let newList = dataList.join('--')

            this.type = data.main.text + '--' + newList
        },
        // 房屋利用情况弹窗确定按钮
        cancel() {
            this.showType = false
            this.activeIndexListCode = []
            if (this.newhouseutilizationCode) {
                this.houseutilizationCode = this.newhouseutilizationCode
            } else {
                this.houseutilizationCode = this.oldhouseutilizationCode
            }
        },
        getDataFun(data, activeIndex, activeIds) {
            // * data ：需要查找的数据
            // * activeIndex：二级中的数据的id
            // * re_activeIds：一级的index
            // 获取第一级数据
            let main = {
                id: data[activeIndex].id,
                text: data[activeIndex].text
            }
            // 获取选择的children数据
            let arr = []
            for (let i = 0; i < activeIds.length; i++) {
                arr.push(data[activeIndex].children[activeIds[i]])
            }
            return { arr, main }
        }
    }
}
</script>

<style lang="scss" scoped>
.van-button--primary {
    background-color: rgba(255, 110, 83, 1);
    border: 1px solid rgba(255, 110, 83, 1);
}
.popup-bg {
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
}
.btn {
    display: flex;
    justify-content: space-between;
}
.cancle {
    padding: 15px 0px 15px 18px;
    font-size: 18px;
    font-weight: bold;
}
.confirm {
    padding: 15px 18px 15px 0px;
    font-size: 18px;
    font-weight: bold;
}
.popup {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 400px;
    overflow: auto;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background: #fff;
}
.item {
    padding: 0 15px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #f7f8f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.selected {
    width: 16px;
    height: 16px;

    background-size: 16px auto;
}
</style>
